<template>
  <view class="msg-container">
    <up-navbar title="数据图" leftIcon="" bgColor="#888888" titleStyle="color: #ffffff;"></up-navbar>
    <view class="top-box">
      <view class="ellipse-container">
        <image class="ellipse-image" src="/static/msg/椭圆.png" />
        <view class="bmi-text">
          <text>BMI</text>
          <text class="bmi-value">20.5</text>
          <text class="bmi-status">超重</text>
        </view>
        <view class="body-fat-text">
          <text>体脂率</text>
          <text class="body-fat-value">20.1%</text>
        </view>
        <view class="weight-text">体重 80KG</view>
      </view>
    </view>
    <view class="middle-gap"></view>
    <view class="bottom-box"></view>
  </view>

  <customTabBar></customTabBar>
</template>

<script>
import customTabBar from "@/components/custom-tab-bar/index.vue"
export default {
  components: {
    customTabBar
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() { },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    // 页面显示时触发事件，通知tabbar更新状态
    uni.$emit('onShow');
  },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped>
.msg-container {
  background-color: #2e2f34;
  min-height: 100vh;
  padding: 10rpx 0 200rpx 0;
  /* 减少底部内边距，为tabbar留出更少的空间 */
  display: flex;
  flex-direction: column;
}

.top-box {
  background-color: #888888;
  height: 30vh;
  width: 100%;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ellipse-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ellipse-image {
  width: 200rpx;
  /* 缩小图片 */
  height: 200rpx;
  /* 缩小图片 */
}

.bmi-text {
  position: absolute;
  left: -120rpx;
  /* 放在椭圆左侧 */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-size: 24rpx;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2rpx;
  line-height: 1.2;
}

.bmi-value {
  font-size: 28rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.bmi-status {
  font-size: 24rpx;
}

.body-fat-text {
  position: absolute;
  right: -120rpx;
  /* 放在椭圆右侧 */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-size: 24rpx;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2rpx;
  line-height: 1.2;
}

.body-fat-value {
  font-size: 28rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.weight-text {
  position: absolute;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}

.middle-gap {
  height: 20rpx;
}

.bottom-box {
  background-color: #888888;
  flex: 1;
  width: 100%;
  border-radius: 0;
}
</style>